.my-page {

    font-size: 14px;

    overflow: hidden;

    margin: 0 auto;

    text-align: center;

    color: #333333;

    display: inline-block;

}



.my-page .my-page-prev,

.my-page .my-page-next {

    float: left;

    width: 30px;

    height: 24px;

    line-height: 24px;

    text-align: center;

    border: 1px solid #ddd;

    cursor: pointer;

    background-color: #ffffff;

}



.my-page .my-page-prev.my-page-forbid,

.my-page .my-page-next.my-page-forbid {

    pointer-events: none;

    background-color: rgba(0, 0, 0, 0.1);

    color: rgba(0, 0, 0, 0.2);

}



.my-page .my-page-prev:not(.my-page-forbid):hover,

.my-page .my-page-next:not(.my-page-forbid):hover {

    // border-color: #e50113;

}



.my-page .my-page-group {

    float: left;

    margin: 0;

    padding: 0;

    overflow: hidden;

}



.my-page .my-page-group li {

    float: left;

    list-style: none;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    min-width: 30px;

    padding: 0 8px;

    height: 24px;

    line-height: 24px;

    text-align: center;

    margin: 0 8px;

    cursor: pointer;

}



.my-page .my-page-group .my-page-cell {

    border: 1px solid #ddd;

    border-radius: 2px;

    background-color: #ffffff;

}



.my-page .my-page-group .my-page-cell:hover,

.my-page .my-page-group .my-page-checked {

    border-color: #E50113;

    background-color: #E50113;

    color: #ffffff;

}



.my-page .my-page-group .my-page-omit {

    pointer-events: none;

}